<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { listScreen } from '@/api/phone.js'

  const screen = ref({})
  const router = useRouter()
  listScreen().then(res => {
    screen.value = res.rows
  })
  const gotoScreen = id => {
    router.push(`/scenery/${id}`)
  }
</script>

<template>
  <div class="drink">
    <head-title title="景点推荐"></head-title>
    <div class="list">
      <div
        class="item"
        v-for="item in screen"
        :key="item.id"
        @click="gotoScreen(item.id)"
      >
        <img v-cover="item.cover" />
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .drink {
    padding: 15px;
  }

  .list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    row-gap: 10px;
    column-gap: 20px;
    margin-top: 20px;
    justify-content: space-between;

    .item {
      position: relative;

      .name {
        position: absolute;
        bottom: 18px;
        left: 9px;
        color: #fff;
        font-size: 18px;
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
</style>
